<template>
  <div class="header">
    <div class="header-return" v-show="showHeader">
      <span class="border-return"></span>
      <span class="iconfont return" @click="toHome">&#xe624;</span>
    </div>
    <div class="header-top" v-show="!showHeader" :style="styleOpacity">
      <div class="header-left">
        <span class="iconfont" @click="toHome">&#xe624;</span>
      </div>
      北京国际鲜花巷
    </div>
    <div style="height: 2000px;"></div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        showHeader:true,
        styleOpacity:{
          opacity:0
        }
      }
    },
    methods:{
      toHome(){
        this.$router.push('/')
      }
    },
    created(){
      document.documentElement.scrollTop=0
    },
    mounted(){
      let that=this
      window.addEventListener("scroll",function(){
        let top=document.documentElement.scrollTop
        if(top>45){
          let opacity=top/130
          opacity=opacity>1?1:opacity
          that.styleOpacity={opacity}
         that.showHeader=false
        }else{
          that.showHeader=true
        }
      })
    }
  }
</script>

<style scope>
  .header-return {
    position: absolute;
    left: .1rem;
    top: .1rem;
    width: .72rem;
    height: .72rem;
  }

  .border-return {
    display: block;
    background-color: #000;
    width: .72rem;
    height: .72rem;
    opacity: .5;
    border-radius: 50%;
  }

  .return {
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    width: .72rem;
    line-height: .72rem;
    text-align: left;
    text-indent: .16rem;
    font-size: .32rem;
    font-weight: bold;
  }

  .header-top {
    position: fixed;
    top: 0;
    text-align: center;
    width: 100%;
    background-color: #00bcd4;
    line-height: .88rem;
    font-size: .36rem;
    color: #fff;
  }

  .header-left {
    position: absolute;
    width: .4rem;
    padding: 0 .2rem;
    text-align: center;
    font-weight: bold;
  }
</style>
